<template>
  <div class="tab">
    <div
      v-for="option in options"
      class="tab-button"
      :class="{ active: tabValue === option.label }"
      @click="change(option)"
    >
      {{ option.label }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { Option } from '../../index.typing';

interface IProps {
  modelValue: string;
  options: Option[];
}

defineOptions({
  name: 'Tab',
});

const props = withDefaults(defineProps<IProps>(), {
  modelValue: '',
  options: () => [],
});

const tabValue = ref('');
const emits = defineEmits(['update:modelValue', 'change']);

const change = (option: any) => {
  tabValue.value = option.label;
  emits('update:modelValue', option.label);
  emits('change', option.label);
};

onMounted(() => {
  change(props.options?.[0]);
});
</script>

<style lang="less" scoped>
.tab {
  width: 100%;
  height: 24px;
  display: flex;
  align-items: center;
  border-radius: 4px;

  .tab-button {
    width: 100%;
    text-align: center;
    background: #323232;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    color: #ffffff;
    opacity: 1;

    &.active {
      background: #0560fd;
    }
    &:hover {
      opacity: 0.8;
    }
  }
}
</style>
